<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>菜品列表</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-danger layui-btn" lay-event="isAll">删除所选内容</button>
    <div class="layui-input-inline">
        <input type="text" name="keyword"  required lay-verify="required" placeholder="菜名"
               class="layui-input">
    </div>
    <button class="layui-btn layui-btn-primary" lay-event="search">搜索</button>
</script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/html" id="imgtmp">
    <img src="/ddc/{{d.image}}" style="width: 100px;height: 100px">
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script th:inline="javascript">
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        table.render({
            elem: '#test'
            , url: 'http://localhost:8080/menu/queryAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cellMinWidth: 100
            , title: '菜品数据表'
            , cols: [
                [{type: 'checkbox', fixed: 'left', align: 'center',style:"height:110px;line-height: 110px;"}
                , {field: 'menuId', title: '菜品编号', fixed: 'left', align: 'center', unresize: true, sort: true}
                , {field: 'menuName', title: '菜品名', align: 'center'}
                , {field: 'shopName', title: '所属店铺',  align: 'center' ,templet: function (res) {
                        return res.shop.shopName;
                    }}
                , {field: 'price', title: '单价',sort: true,edit: 'text',align: 'center'}
                ,{field: 'image', title: '菜品图',align: 'center',templet:"#imgtmp",style:"height:110px"}]
            ]
            , page: true
            , limits: [5, 10, 20]
            , limit: 10
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                }
            }
        });
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'search':
                    let keyword = $("input[name=keyword]").val();
                    table.reload('test', {
                        url: "http://localhost:8080/menu/queryAll?keyword=" + keyword
                    });
                    break;
                case 'isAll':
                    var data = checkStatus.data;
                    var ids = [];
                    for (let i = 0; i < data.length; i++) {
                        ids.push(data[i].menuId);
                    }
                    if (ids.length == 0) {
                        layer.msg('至少选择一项！', {
                            time: 1500
                        });
                        return;
                    }
                    layer.confirm('确认要删除这' + ids.length + '条数据吗？', function (index) {
                        $.ajax({
                            url: "http://localhost:8080/menu/deleteByIds",
                            data: {
                                "ids": ids
                            },
                            type: "post",
                            traditional: true,
                            success: function (res) {
                                layer.close(index);
                                if (res) {
                                    layer.msg('删除成功', {
                                        icon: 1,
                                        time: 1500
                                    });
                                    setTimeout('location.reload()', 1500);
                                } else {
                                    layer.msg('删除失败', {
                                        icon: 2,
                                        time: 1500
                                    });
                                }
                            }
                        });
                    })
                    break;
            }
        });
        // 监听编辑单元格
        table.on('edit(test)', function (obj) {
            layer.confirm('确认要修改吗?', function (index) {
                $.ajax({
                    url: "http://localhost:8080/menu/update",
                    data: {
                        "menuId": obj.data.menuId,
                        "price": obj.value
                    },
                    success: function (res) {
                        layer.msg('修改成功', {
                            icon: 1,
                            time: 1500
                        });
                        setTimeout('layer.close(index)', 1500);
                    }
                });
            }, function () {
                location.reload();
            })
        })
    });
</script>
</body>
</html>